<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<title>jquery.xslTransform</title>
	<!-- jquery, of course -->
	<script type="text/javascript" src="../jquery-1.2.1.pack.js"></script>
	<!-- jquery.debug plugin -->
	<script type="text/javascript" src="../../jquery.debug/jquery.debug.js"></script>
	<!-- sarissa, required by jquery.xslTransform -->
	<script type="text/javascript" src="../sarissa-full-0.9.9.4/gr/abiss/js/sarissa/sarissa.js"></script>
	<script type="text/javascript" src="../sarissa-full-0.9.9.4/gr/abiss/js/sarissa/sarissa_ieemu_xpath.js"></script>
	<!-- jquery.xslTransform plugin -->
	<script type="text/javascript" src="../jquery.xslTransform.js"></script>
	<style type="text/css">
	code {
		white-space: pre;
		font-family: monospace;
		margin: 0;
		padding: 0 3px;
	}
	.section {
		background-color: #d6d6d6;
		font-weight: bold;
		padding: 5px;
		margin-bottom :0;
	}
	.result {
		background-color: #eeeeee;
		margin-top: 0;
	}
	ul {
		margin-top: 0;
	}

	/* this is created for ie only ... in firefox, use firebug http://getfirebug.com/ */
	#DEBUG {
		border-top: 2px cyan dashed;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 10px;
		color: gray;
	}
	</style>

	<script type="text/javascript">
	// turn on debugging (see jquery.xslTransform.js)
	var DEBUG = true;

	// check for jQuery and Sarissa
	try{
		jQuery;
	}catch(e){
		alert('You need to include jQuery!');
	}
	try{
		Sarissa;
	}catch(e){
		alert('You need to include Sarissa!');
	}

	$(document).ready( function(){

		// without an xpath
		$('#without').getTransform(
			'test.xsl',
			'test.xml'
		);

		// now load both files into variables for the next 2 transformations
		var xsldoc = $.xsl.load('test.xsl');
		var xmldoc = $.xsl.load('test.xml');

		// with an xpath
		$('#with').getTransform(
			xsldoc,
			xmldoc,
			{
				xpath: '/test/inside'
			}
		);

		// with a param and a callback
		$('#param').getTransform(
			xsldoc,
			xmldoc,
			{
				params: { arthur: 'dent, a total kneebiter' },
				callback: function(){ $('#param li').hover( function(){ $(this).css('background-color','yellow'); }, function(){ $(this).css('background-color','transparent'); } ); }
			}
		);

		// serialize doc
		$('#serialize').html( $.xsl.serialize(xmldoc).replace(/</g,'&lt;').replace(/>/g,'&gt;') );

	});
	</script>
</head>

<body>

<p>This file tests all major functions of jquery.xslTransform.</p>
<p>There is a script in the resulting transformation which bolds the text in each rolled-over &lt;li&gt;.</p>
<p>The last transformation has a callback, which adds a background rollover effect.</p>

<p class="section">WITHOUT an xpath</p>
<div class="result" id="without"></div>

<p class="section">WITH an xpath (/test/inside) -- 2007-12-03: disabled support for this in IE due to strange bug</p>
<div class="result" id="with"></div>

<p class="section">With a callback and a parameter named 'arthur' and a value of 'dent, a total kneebiter'.</p>
<div class="result" id="param"></div>

<p class="section">Load an XML file and serialize (this is the xml file used in the above examples)</p>
<div class="result"><code id="serialize"></code></div>

</body>
</html>
